<style>
    .container {
        display: flex;
        flex-direction: column;
        width: 1000px;
        margin: 50px auto;
        /* border: 2px solid #f00; */
    }

    header,footer {
        background-color: #707070;
        padding: 10px;
        color: #fff;
        text-align: center;
        flex: 1
    }

    .grid{
        display: flex;
        min-height: 400px;
    }
    .left,.center,.right{
        flex: 1;
        text-align: center;
        line-height: 400px;
        color: #fff;
    }

</style>


<body>
    <div class="container">
        <header>#header</header>

        <div class="grid">
            <div class="left" style="background-color: #459;">left</div>
            <div class="center" style="background-color: #ccc; flex: 2;">center</div>
            <div class="right" style="background-color: #954;">right</div>
        </div>

        <footer>#footer</footer>
    </div>
</body>